<template>
	<a-card>
		<a-form layout="inline" :model="formState">
			<a-form-item label="模块名称">
				<a-tree-select v-model:value="formState.pid" show-search
					@select="selectTreePid"
					:dropdownMatchSelectWidth="false"
					style="width:200px"
					:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择模块名称" allow-clear
					tree-default-expand-all :tree-data="treeData" :replaceFields="replaceFields"
					tree-node-filter-prop="label">
				</a-tree-select>
			</a-form-item>
			<a-form-item>
				<a-button style="margin-right: 8px" class="searchButton" type="primary" html-type="submit" @click="init">
					查询
				</a-button>
				<a-button class="editable-add-btn"  type="primary" @click="addOpen = true">新增</a-button>
			</a-form-item>
		</a-form>

		<a-table childrenColumnName="child" ref="table"
			:scroll="{ x: 400 }"
				 v-if="tabledata.length"
				 :defaultExpandAllRows="true"
			:expandRowByClick="true"
			:row-key="(record) => record.module_id"
			:pagination="false"
			:columns="columns" :data-source="tabledata">
			<template #expandIcon="prop" >
				<span v-if="prop && prop.record.child && prop.record.child.length > 0">
					<down-outlined v-if="prop.expanded "/>
					<up-outlined v-else/>
				</span>
			</template>
			<template #bodyCell="{ column, record }">

				<template v-if="column.key === 'action'">
					<a-button type="link" @click="addOpenclick(record)">新增</a-button>
					<a-popconfirm title="确定要删除该数据" ok-text="确定" cancel-text="取消" @confirm="deleteConfirm(record)">
						<a-button type="link" style="color: red;">删除</a-button>
					</a-popconfirm>

					<a-button type="link" @click="editOpenclick(record)">编辑</a-button>
				</template>
			</template>
		</a-table>
		<a-modal :width="800" v-model:visible="addOpen" class="custom-class" :root-style="{ color: 'blue' }" style="color: red"
			title="新增" placement="right">
			<a-form :model="addFormData" v-bind="layout">
				<a-row>
					<a-col :span="11">
						<a-form-item label="模块名称">
							<a-input allow-clear v-model:value="addFormData.name" placeholder="请输入模块名称">
							</a-input>
						</a-form-item>
						<a-form-item label="路由地址">
							<a-input allow-clear v-model:value="addFormData.path" placeholder="请输入路由地址">
							</a-input>
						</a-form-item>
						<a-form-item label="标题">
							<a-input allow-clear v-model:value="addFormData.title" placeholder="请输入模块名称">
							</a-input>
						</a-form-item>
						<a-form-item label="图标">
							<a-input
								v-model:value="addFormData.icon"
								style="width: calc(100% - 70px)"
								placeholder="请选择图标"
								allow-clear
							/>
							<a-button type="primary" @click="$refs.iconSelector.showIconModal(addFormData.icon)">选择</a-button>
						</a-form-item>
					</a-col>
					<a-col style="margin-left: 20px" :span="12">
						<a-form-item label="排序序号">
							<a-input allow-clear v-model:value="addFormData.sort" placeholder="请输入排序序号">
							</a-input>
						</a-form-item>
						<a-form-item label="组件地址">
							<a-input addon-before="src/views/"
									 allow-clear v-model:value="addFormData.component" placeholder="请输入组件地址">
							</a-input>
						</a-form-item>
						<a-form-item label="显示隐藏">
							<a-select
								v-model:value="addFormData.hidden"
								style="width: 200px"
								placeholder="请选择是否显示"
								:options="hiddenOptions"
							></a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<template #footer>
				<a-button style="margin-right: 8px" @click="addOpen = false">取消</a-button>
				<a-button type="primary" @click="handleAdd">提交</a-button>
			</template>
		</a-modal>
		<a-modal :width="800" v-model:visible="editOpen" class="custom-class" :root-style="{ color: 'blue' }" style="color: red"
			title="编辑" placement="right">
			<a-form v-bind="layout" :model="addFormData">
				<a-row>
					<a-col :span="11">
						<a-form-item label="模块名称">
							<a-input allow-clear v-model:value="addFormData.name" placeholder="请输入模块名称">
							</a-input>
						</a-form-item>
						<a-form-item label="路由地址">
							<a-input allow-clear v-model:value="addFormData.path" placeholder="请输入路由地址">
							</a-input>
						</a-form-item>
						<a-form-item label="标题">
							<a-input allow-clear v-model:value="addFormData.title" placeholder="请输入模块名称">
							</a-input>
						</a-form-item>
						<a-form-item label="图标">
							<a-input
								v-model:value="addFormData.icon"
								style="width: calc(100% - 70px)"
								placeholder="请选择图标"
								allow-clear
							/>
							<a-button type="primary" @click="$refs.iconSelector.showIconModal(addFormData.icon)">选择</a-button>
						</a-form-item>
					</a-col>
					<a-col style="margin-left: 20px" :span="12">
						<a-form-item label="排序序号">
							<a-input allow-clear v-model:value="addFormData.sort" placeholder="请输入排序序号">
							</a-input>
						</a-form-item>
						<a-form-item label="组件地址">
							<a-input addon-before="src/views/"
									 allow-clear v-model:value="addFormData.component" placeholder="请输入组件地址">
							</a-input>
						</a-form-item>
						<a-form-item label="显示隐藏">
							<a-select
								v-model:value="addFormData.hidden"
								style="width: 200px"
								placeholder="请选择是否显示"
								:options="hiddenOptions"
							></a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<template #footer>
				<a-button style="margin-right: 8px" @click="editOpen = false">取消</a-button>
				<a-button type="primary" @click="handleedit">提交</a-button>
			</template>
		</a-modal>
		<Icon-selector ref="iconSelector" @iconCallBack="iconCallBack" />
	</a-card>
</template>

<script>
import moduleJsApi from '@/api/auth/module';
import IconSelector from '@/components/Selector/iconSelector.vue'
import { notification, message } from 'ant-design-vue'
export default {
	name: 'Other',
	components:{
		IconSelector,
	},
	data() {
		return {
			gData: [],
			addOpen: false,
			layout : {
				labelCol: {
					span: 8,
				},
				wrapperCol: {
					span: 16,
				},
			},
			addFormData: {
				name: null,
				title: null,
				path: null,
				component: null,
				icon: null,
				hidden: null,
				pid	: null,
				sort: null,
			},
			rowSelection: {
				onChange: (selectedRowKeys, selectedRows) => {
					console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
				},
				onSelect: (record, selected, selectedRows) => {
					console.log(record, selected, selectedRows);
				},
				onSelectAll: (selected, selectedRows, changeRows) => {
					console.log(selected, selectedRows, changeRows);
				},
			},
			hiddenOptions:[
				{
					value:1,
					label:'显示'
				},
				{
					value:0,
					label:'隐藏'
				}
			],
			editOpen: false,
			formState: {},
			replaceFields: {
				children: 'child', label: 'name', key: 'module_id', value: 'module_id'
			},
			fieldNames: {
				children: 'child',
				key: 'module_id',
				title: 'name',
			},
			columns: [
				{
					title: '模块名称',
					dataIndex: 'name',
					key: 'name',
					width:'100px'
				},
				{
					title: '标题',
					dataIndex: 'title',
					key: 'title',
					width:'100px'
				},
				{
					title: '操作',
					dataIndex: 'action',
					key: 'action',
					width:'240px'
				},
			],
			tabledata: []
		}
	},
	watch: {
		'addOpen'(val) {
			if (!val) {
				this.addFormData = {
					name: null,
					title: null,
					path: null,
					component: null,
					icon: null,
					hidden: 1,
					pid	: null,
					sort: null,
				}
			}
		},
		'editOpen'(val) {
			if (!val) {
				this.addFormData = {
					name: null,
					title: null,
					path: null,
					component: null,
					icon: null,
					hidden: 1,
					pid	: null,
					sort: null,
				}
			}
		}
	},
	created() {
		moduleJsApi.moduleTree({ pid: 0 }).then(res => {
				this.treeData = res
		})
		this.init()
	},
	methods: {
		selectTreePid(val){
			if(val){
				this.formState.pid = val
			}else {
				this.formState.pid = 0
			}
		},
		iconCallBack(value){
			this.addFormData.icon = value
		},
		init() {
			if(this.formState && this.formState.pid){
				moduleJsApi.moduleTree({ pid: this.formState.pid }).then(res => {
					this.tabledata = [res]
				})
			}else {
				moduleJsApi.moduleTree({ pid: 0 }).then(res => {
					this.tabledata = res
				})

			}
		},
		clicktree(selectedKeys) {
			this.formState.pid = selectedKeys[0]
			this.addFormData.pid = selectedKeys[0]
		},
		handleAdd() {
			if (this.addFormData && !this.addFormData.name) {
				notification['error']({
					message: '模块名称不能为空！',
				});
				return
			}
			moduleJsApi.moduleAdd(this.addFormData).then(res => {
				this.addOpen = false
				this.addFormData = {
					name: null,
					title: null,
					path: null,
					component: null,
					icon: null,
					hidden: 1,
					pid	: null,
					sort: null,
				}
				this.init()
			})
		},
		deleteConfirm(record) {
			moduleJsApi.moduleDel({ id: record.module_id }).then(res => {
				this.formState = {}
				message.success('删除成功')
				this.init()
			})

		},
		editOpenclick(record) {
			this.addFormData = record
			this.editOpen = true
		},
		addOpenclick(record) {
			this.addFormData.pid = record.module_id
			this.addOpen = true
		},
		handleedit() {
			if (this.addFormData && !this.addFormData.name) {
				notification['error']({
					message: '模块名称不能为空！',
				});
				return
			}
			moduleJsApi.moduleEdit(this.addFormData).then(res => {
				this.editOpen = false
				this.addFormData = {
					name: null,
					title: null,
					path: null,
					component: null,
					icon: null,
					hidden: 1,
					pid	: null,
					sort: null,
				}
				this.init()
			})
		}
	}
}
</script>

<style lang="less" scoped>
	@import '../index.less';
</style>
